<!DOCTYPE html >
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title>即时通讯demo</title>
    <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="css/base.css">
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-text">欢迎你, <span id="user_now"><%= user.username %></span></div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="javascript:void(0);">LINK1</a></li>
                <li><a href="javascript:void(0);">LINK2</a></li>
                <li class="active"><a href="javascript:void(0);" @click="logout">注销</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="container">
    <div class="panel panel-default" id="user-list">
        <div class="panel-heading">
            <h3 class="panel-title">当前在线用户</h3>
        </div>
        <div class="panel-body">
            <div class="list-group">
                <!-- 选中的class加active -->
                <a href="javascript:void(0);" class="list-group-item" v-for="user in users" @click="chooseUser(user)">
                    {{user.username}}
                </a>
            </div>
        </div>
    </div>
    <div id="main-panel">
    <div class="panel panel-default selected-users">
        <label v-for="user in selectedUsers" track-by="$index">
            <span class="label label-primary" >
                {{user.username}}
            </span>
            <span>
                <img class="remove" src="images/close.png" title="移除" @click="removeTarget(user)"/>
            </span>
        </label>
    </div>
    <div class="panel panel-default">
        <div class="panel-body message-panel">
            <ul>
                <li v-for="msg in history_msg">
                    <span v-bind:class="{from:msg.receive,me:!msg.receive}">{{msg.from}}</span>
                    <span class="time">{{formatDate(msg.time)}}</span>
                    <span v-if="!msg.receive">
                        TO
                        <span class="label label-info" v-for="target in msg.to">{{target.username}}</span>
                    </span>
                    <div class="content">{{msg.content}}</div>
                </li>
            </ul>
        </div>
    </div>

    <!-- 发送文字输入框 -->
    <div class="row">
        <div class="col-lg-12">
            <div class="input-group">
                <input type="text" class="form-control" v-model="message" @keyup.enter="sendMessage"/>
                <span class="input-group-btn">
                  <button class="btn btn-success" type="button" @click="sendMessage">发送</button>
                </span>
            </div>
        </div>
    </div>
    </div>
</div>
<%- include("commons/footer") %>

<script src="js/underscore.js"></script>
<script src="js/vue/vue.js"></script>
<script src="js/jquery/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/moment-with-locales.js"></script>
<script src="js/main.js"></script>
</body>
</html>